<wicket:extend>
	<div wicket:id="content" class="dashboard flex-grow-1 fit-content d-flex flex-column"></div>
	<wicket:fragment wicket:id="dashboardSelectorFrag">
		<ul class="list-unstyled mb-0 py-2">
			<li wicket:id="dashboards" class="selectable">
				<a wicket:id="link">
					<div class="d-flex align-items-center">
						<svg wicket:id="icon" class="icon icon-sm mr-2"></svg><span wicket:id="label" class="text-nowrap"></span>
					</div>
					<div wicket:id="note" class="font-size-sm text-muted ml-4"></div> 
				</a>
			</li>			
		</ul>
	</wicket:fragment>
	<wicket:fragment wicket:id="dashboardViewFrag">
		<div class="head border-bottom d-flex align-items-center flex-shrink-0">
			<a wicket:id="dashboardSelector" class="dashboard-selector mr-2">
				<span wicket:id="name"></span> 
				<wicket:svg href="arrow" class="icon rotate-90"/>
			</a>
			<span wicket:id="dashboardNote" class="font-size-sm text-muted d-none d-md-inline mr-2"></span>
			<span class="operations ml-auto">
				<a wicket:id="editDashboard" class="btn btn-xs btn-icon btn-light btn-hover-primary ml-2" title="Edit dashboard"><wicket:svg href="edit" class="icon"/></a>
				<a wicket:id="copyDashboard" class="btn btn-xs btn-icon btn-light btn-hover-primary ml-2" title="Copy dashboard"><wicket:svg href="copy" class="icon"/></a>
				<a wicket:id="shareDashboard" class="btn btn-xs btn-icon btn-light btn-hover-primary ml-2" title="Share dashboard"><wicket:svg href="share" class="icon"/></a>
				<a wicket:id="deleteDashboard" class="btn btn-xs btn-icon btn-light btn-hover-danger ml-2" title="Delete dashboard"><wicket:svg href="trash" class="icon"/></a>
				<a wicket:id="addDashboard" class="btn btn-xs btn-icon btn-light btn-hover-primary ml-2" title="Add dashboard"><wicket:svg href="plus" class="icon"/></a>
			</span>
		</div>
		<div class="body autofit flex-grow-1">
			<div class="content resize-aware flex-grow-1 d-flex flex-column position-relative">
				<div class="grid flex-grow-1"></div>
				<div wicket:id="widgets" class="widget shadow flex-column"></div>
			</div>
		</div>
	</wicket:fragment>
	<wicket:fragment wicket:id="dashboardEditFrag">
		<div class="head border-bottom flex-shrink-0">
			<form wicket:id="form" class="leave-confirm">
				<div class="d-flex align-items-center">
					<input wicket:id="name" placeholder="Dashboard name" class="form-control-sm form-control w-auto">
					<a wicket:id="addWidget" class="btn btn-sm btn-light btn-hover-primary mx-4">Add Widget <wicket:svg href="arrow" class="icon rotate-90 ml-1"/></a>
					<button wicket:id="save" type="submit" class="btn btn-sm btn-primary dirty-aware mr-2">Save</button>
					<a wicket:id="cancel" class="btn btn-sm btn-secondary">Cancel</a>
				</div>
				<div wicket:id="feedback" class="mt-2"></div>			
			</form>
		</div>
		<div class="body autofit flex-grow-1 d-flex flex-column">
			<div class="content m-2 m-sm-5 resize-aware flex-grow-1 d-flex flex-column position-relative">
				<svg class="grid d-block flex-grow-1"></svg>
				<div wicket:id="widgets" class="widget shadow d-flex flex-column"></div>
			</div>
		</div>
	</wicket:fragment>
</wicket:extend>